如果沒有用 Timeline 會怎麼樣？

在介紹 Timeline 之前，想先分享沒有使用 Timeline 來進行動畫排程，也不使用官網舉例的 delay 屬性，程式碼可能會出現像以下的巢狀結構：

gsap.to(".candy1", { x: 100, duration: 1, onComplete: () => {
  gsap.to(".candy2", { y: 200, duration: 2, onComplete: () => {
    gsap.to(".candy3", { rotation: 360, duration: 1, onComplete: () => {
      gsap.to(".candy4", { scale: 1.5, duration: 0.5, onComplete: () => {
        gsap.to(".candy5", { opacity: 0, duration: 1, onComplete: () => {
          gsap.to(".candy6", { x: -100, y: -100, duration: 1, onComplete: () => {
            console.log("呼～全部動畫結束！");
          }});
        }});
      }});
    }});
  }});
}});

備註： onComplete 是 GSAP 的一個動畫事件，之後會再介紹到～

以上都還只是非常簡單的操作，如果專案一旦變複雜，實在不是很好的方式 >"<

這時候就有 Timeline 存在的意義啦！使用方式也很直白：

const tl = gsap.timeline();

tl.to(".candy1", { x: 100, duration: 1 })
  .to(".candy2", { y: 200, duration: 1 })
  .to(".candy3", { rotation: 360, duration: 0.5 })
  .to(".candy4", { scale: 1.5, duration: 1 })
  .to(".candy5", { opacity: 0, duration: 1 })
  .to(".candy6", { x: -100, y: -100, duration: 1 })
  .add(() => console.log("誒嘿 全部動畫結束！"));

總結來說，時間軸（Timeline）不但可以準確得安排動畫順序，也讓程式碼本身更易於閱讀與擴充。

Timeline 的參數（vars）

擺放的位置如下：

const tl = gsap.timeline();
tl.to(".candy1",{ opacity: 1, duration: 2 } , vars)

關於參數的介紹，官網上的解說已經非常清楚，在這裡透過表格的整理讓自己再更加熟悉！

以上只有數字(n)是絕對時間，其餘都是相對時間：

關於 Label

以上自己覺得比較不好快速理解的是 Label，因此接下來想藉由一個情境來分享它：
不知道大家有沒有曾經先到咖啡廳或餐廳，然後用自己的包包幫朋友佔位的經驗（我先自首，我有佔過，就是一下下，請原諒我）

不確定等了多久，終於看到朋友推門進來，坐在位子上的我，一邊對他招手一邊說：「嘿！我用我的包包幫你佔了這個位子，快過來坐！」
Label 就像是這個情境裡的包包，告訴下一個動畫（也就是後來才進來的朋友）：「位子在這裡。」還有可以坐下來進行接下來想做的事。然後，也因為每個人佔位的東西都不太一樣，這個 Label 是自己命名的，不是一定要叫做這個名字！以下就是根據這個情境試想出的簡單小範例：

const tl = gsap.timeline();

tl.addLabel("myBag", 2); // 在第 2 秒「放包包佔位」

tl.to(".friend1", { x: 100, duration: 1 }, "myBag");     // 第一位朋友到了 → 坐下
tl.to(".friend2", { y: 100, duration: 1 }, "myBag+=1");  // 第二位朋友晚 1 秒來
tl.to(".friend3", { rotation: 180, duration: 1 }, "myBag-=0.5"); // 第三位朋友提早半秒來

第三天的分享就到這裡啦～希望我還可以繼續跑下去！（才跑第三天感覺就快要不行了）